<template>
	<view>
		<view class="toptext">
			<text class="text">{{title}}</text>
		</view>
		<view class="boximg">
			<text>头像</text>
			<button class="btn"  @click="btnimg"></button>
			<image @click="btnimg"  :src="list.headimg"></image>
		</view>
		<view class="boxtext">
			<text>用户名</text>
			<input class="text"  type="text" v-model="list.supername">
		</view>
		<view class="boxtel">
			<text>绑定邮箱</text>
			<input class="text"  type="text" v-model="list.email">
		</view>
		<view class="boxtel">
			<text>绑定手机</text>
			<input class="text"  type="text" v-model="list.tel">
		</view>
		<view class="boxtel">
			<text>联系地址</text>
			<input class="text"  type="text" v-model="list.address">
		</view>
		
		<view class="boxtel">
			<text>支付密码</text>
			<input  style="color: red;" class="text" :maxlength="6"  type="number" v-model="list.paymentPassword">
		</view>
		<view>
			
			<button @click="updata">{{btnname}}</button>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'个人信息',list:{},btnname:'更新个人信息',account:'',
				type: "false",dis: true
			}
		},
		onLoad(option) {
			this.account = option.account
			
			this.getdata()
		},
		methods: {
			async btnimg(){
				const res = await this.Upload({
					url:'api/upload/postimage'
				});
				console.log(res)
				this.list.headimg=  res.data.slice(8,80)
			},
			async getdata(){
				var account = ('account')
				const res = await this.Request({
					url:'/api/super/pergetdata',
					method:'POST',
					data:{account:this.account},
				})
				this.list = res.data[0]
			},
			async updata(){
				this.type = !this.type;
				// AnimationEffect
				// alert(this.list.paymentPassword.toString())
				if(this.list.paymentPassword.toString().length!=6){
					uni.showToast({
						title: '支付密码必须是6位'
					})
					return false
				};
				if(this.type==true){
					// 第二次点击
					this.type =  true;
					const res =await this.Request({
						url:'/api/super/perupdata',
						method:'PUT',
						data:{supername:this.list.supername,tel:this.list.tel,
						email:this.list.email,address:this.list.address,
						headimg:this.list.headimg,account:this.account,
						paymentPassword:this.list.paymentPassword
						}
					})
					if(res){
						uni.showToast({
							title: '更新成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/super/personal/personal'
							})
						},1000)
					}
				}else{
					// 第一次点击
					this.type =  false;
					this.dis = false
					this.btnname = "保存"
					this.title = '更新个人信息'
				}
			},
		}
	}
</script>

<style lang="scss">
	text{
		font-family: 'Courier New';
		font-size: 130%;
		font-weight: 800;
		margin:auto 0;
		margin-left: 5px;
	}
	input{
		margin:auto 0;
	}
	.toptext{
		width: 100%;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
		}
	}
	.boximg{
		height: 80px;
		width: 80px;
		display: flex;
		position: relative;
		.btn{
			height: 70px;
			width: 70px;
			position: absolute;
			margin-top: 5px;
			margin-left: 140px;
			z-index: 5;
			opacity: 0;
		}
		image{
			position: absolute;
			margin: 5px 0 5px 140px;
			height: 70px;
			width: 70px;
			/* 背景图片置于最低层 */
			z-index: 3;
		}
	}
	.boxtext{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 65px;
			color: #d3d3d3;
		}
	}
	.boxtel{
		height: 50px;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 65px;
			color: #d3d3d3;
		}
	}
</style>
